import React from 'react';
import { inject, observer} from 'mobx-react';
import {WeaTableNew} from 'comsMobx';
import { Button } from 'antd';
import {WeaTop,WeaTab,WeaLeftRightLayout,WeaRightMenu,WeaPopoverHrm,WeaTools,WeaErrorPage,WeaLocaleProvider,WeaDialog} from 'ecCom';
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@inject('wfFreeFlowTemplateStore')
@observer
class AddFreeTemplate extends React.Component {
    constructor(props) {
		super(props);
    }
    doInit(props){
        const { wfFreeFlowTemplateStore } = props;
        const { searchList , getAddTemplateBaseData} = wfFreeFlowTemplateStore;
        
    }
    componentDidMount() {
        this.doInit(this.props);
    }
    componentWillReceiveProps(nextProps) {
    }
    render() {
        const { wfFreeFlowTemplateStore } = this.props;
        const { setAddModalShow , addModalShow} = wfFreeFlowTemplateStore;
        
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@0l3jgg`}
                visible={addModalShow}
                title={getLabel(28051,'新建模板')}
                icon="icon-coms-workflow"
                iconBgcolor='#0079DE'
                maskClosable={false}
                buttons={this.getModalBtns()}
                onCancel={() => setAddModalShow(false)}
                style={{width: "500px",height:'180px'}}
                moreBtn={{datas:this.getRightMenu()}}
                hasScroll
            >
                <div className="wf-free-flowset-addModal">
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ime520`} 
                        collectParams={{favname:getLabel(28051,'新建模板'), favouritetype:2}}
                        datas={this.getRightMenu()}>
                        {this.getContent()}
                    </WeaRightMenu>
                </div>
            </WeaDialog>
        )
    }
    getContent(){
        const { wfFreeFlowTemplateStore } = this.props;
        const { addForm , addCondition} = wfFreeFlowTemplateStore;
        const coms = addForm.render({
            needTigger: false,
            showGroup:true,
            showTitle:false,
            col:1
            }, {
                onChange:(v)=>{
                        for(let key in v){
                            if(key=='name'){
                                if(v[key].value.replace(/[^\u0000-\u00ff]/g,"aaa").length == 100) {
                                    addForm.showError('name', '"'+getLabel(18151, '模板名称')+'"' +getLabel(385390, '长度不能超过')+" 100 "+ getLabel(20075, '个字符'));
                                }
                            }
                        }
                    }
            });
        return coms;
    }
    addSave(goDetail = false){
        const { wfFreeFlowTemplateStore } = this.props;
        const { addForm , addSave } = wfFreeFlowTemplateStore;
        addForm.validateForm().then(f=>{
            console.log(f.isValid, 'validateForm');
            if(f.isValid){
                addSave(goDetail);
            }else{
                f.showErrors();
                this.setState({date: new Date()}); // 改变一个state的变量,强制页面刷新
            }
        });

    } 
    getModalBtns(){
        const { wfFreeFlowTemplateStore } = this.props;
        const { operateBtnsState } = wfFreeFlowTemplateStore;
        const { addSaving } = operateBtnsState;
        let btns = [];
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2s1lwo@save`} type="primary" disabled={addSaving} onClick={()=>{this.addSave()}}>{getLabel(86,'保存')}</Button>);
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0lnecb@saveDetailSetting`} type="primary" disabled={addSaving} onClick={()=>{this.addSave(true)}}>{getLabel(32159,'保存并进入详细设置')}</Button>);
        return btns;
    }
    getRightMenu(){
        const { wfFreeFlowTemplateStore } = this.props;
        const { operateBtnsState } = wfFreeFlowTemplateStore;
        const { addSaving } = operateBtnsState;
        let rtMenus = [];
        rtMenus.push({
            key: "save",
    		icon: <i className="icon-coms-Preservation"/>,
            content:getLabel(86,'保存'),
            disabled:addSaving,
            onClick: key =>{ this.addSave()}
        });
        rtMenus.push({
            key: "saveToEdit",
    		icon: <i className="icon-coms-Preservation"/>,
            content:getLabel(32159,'保存并进入详细设置'),
            disabled:addSaving,
            onClick: key =>{ this.addSave(true)}
        });
    	return rtMenus;
    }
}

export default WeaTools.tryCatch(React, 
    props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@a0ig53`} msg={ props.error ? props.error : getLabel(383324,' 对不起，该页面异常，请联系管理员 ')+'！'} />,
    {error: ""}
)(AddFreeTemplate);